<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>需求列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 10px 15px;
      background-color: white;
    }
    
    .search-input-group {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 20px;
      border: 1px solid #eee;
      background-color: #f9f9f9;
      font-size: 14px;
    }
    
    .search-input:focus {
      outline: none;
      border-color: #0d6efd;
      background-color: white;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      padding: 8px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      overflow-x: auto;
      gap: 10px;
    }
    
    .filter-item {
      white-space: nowrap;
      padding: 5px 12px;
      border-radius: 15px;
      font-size: 14px;
      background-color: #f5f5f5;
      color: #333;
      flex-shrink: 0;
    }
    
    .filter-item.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 需求列表 */
    .demand-list {
      margin-top: 10px;
    }
    
    .demand-item {
      background-color: white;
      margin-bottom: 10px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 发布者信息 */
    .publisher-info {
      padding: 12px 15px;
      display: flex;
      align-items: center;
    }
    
    .publisher-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .no-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #e9ecef;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #495057;
      font-size: 16px;
      margin-right: 10px;
    }
    
    .publisher-details {
      flex: 1;
    }
    
    .publisher-name {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 2px;
    }
    
    .publish-time {
      font-size: 12px;
      color: #999;
    }
    
    .verify-badge {
      color: #0d6efd;
      font-size: 12px;
      margin-left: 5px;
    }
    
    /* 内容区域 */
    .demand-content {
      padding: 0 15px 12px;
    }
    
    .demand-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .demand-desc {
      font-size: 14px;
      color: #555;
      line-height: 1.5;
      margin-bottom: 10px;
    }
    
    /* 图片容器 - 多种样式 */
    .images-container {
      margin-bottom: 10px;
    }
    
    /* 无图样式 */
    .no-images {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      color: #999;
      font-size: 14px;
    }
    
    /* 单图样式 */
    .single-image {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .single-image img {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      object-fit: cover;
    }
    
    /* 多图样式 */
    .multiple-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }
    
    .multi-image-item {
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    
    .multi-image-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .image-count {
      position: absolute;
      bottom: 5px;
      right: 5px;
      background-color: rgba(0,0,0,0.6);
      color: white;
      font-size: 12px;
      padding: 2px 5px;
      border-radius: 4px;
    }
    
    /* 需求信息 */
    .demand-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 13px;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #666;
    }
    
    .meta-item i {
      color: #999;
      font-size: 14px;
    }
    
    .budget {
      color: #dc3545;
      font-weight: 500;
    }
    
    /* 标签区域 */
    .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 10px;
    }
    
    .demand-tag {
      padding: 3px 8px;
      background-color: #fff0f0;
      color: #dc3545;
      border-radius: 4px;
      font-size: 12px;
    }
    
    /* 操作区域 */
    .action-bar {
      display: flex;
      justify-content: space-between;
      padding: 8px 15px;
      border-top: 1px solid #eee;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 13px;
      gap: 5px;
      padding: 5px 10px;
      border-radius: 4px;
    }
    
    .action-btn:hover {
      background-color: #f5f5f5;
      color: #0d6efd;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
    }
    
    .nav-item.active {
      color: #0d6efd;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 悬浮按钮 */
    .float-btn {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #0d6efd;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 10px rgba(13,110,253,0.3);
      z-index: 999;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-bars"></i>
    </button>
    <h1 class="nav-title">需求列表</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-bell-o"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-bar">
    <div class="search-input-group">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索需求内容...">
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-item active">全部</div>
    <div class="filter-item">求购商品</div>
    <div class="filter-item">服务需求</div>
    <div class="filter-item">合作需求</div>
    <div class="filter-item">技术支持</div>
    <div class="filter-item">人才招聘</div>
    <div class="filter-item">更多分类</div>
  </div>
  
  <!-- 需求列表 -->
  <div class="demand-list">
    <!-- 1. 无图片样式 -->
    <div class="demand-item">
      <div class="publisher-info">
        <img src="https://picsum.photos/100/100?random=1" class="publisher-avatar" alt="发布者头像">
        <div class="publisher-details">
          <div class="d-flex align-items-center">
            <span class="publisher-name">餐饮店主</span>
            <i class="fa fa-check-circle verify-badge"></i>
          </div>
          <div class="publish-time">2小时前</div>
        </div>
        <button class="btn btn-outline-primary btn-sm">关注</button>
      </div>
      
      <div class="demand-content">
        <div class="demand-title">长期采购新鲜蔬菜和水果，每日配送</div>
        <div class="demand-desc">
          本人经营一家中型餐厅，需要长期采购新鲜蔬菜和水果，要求每日早晨配送，保证新鲜度。需求量稳定，希望能与可靠的供应商建立长期合作关系，有意者请联系。
        </div>
        
        <!-- 无图片 -->
        <div class="images-container">
          <div class="no-images">
            <i class="fa fa-picture-o mb-2"></i>
            <div>暂无需求图片</div>
          </div>
        </div>
        
        <div class="demand-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 上海市静安区</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 长期需求</div>
          <div class="meta-item"><i class="fa fa-money"></i> <span class="budget">预算面议</span></div>
        </div>
        
        <div class="tags-container">
          <span class="demand-tag">食品采购</span>
          <span class="demand-tag">长期合作</span>
          <span class="demand-tag">每日配送</span>
        </div>
      </div>
      
      <div class="action-bar">
        <button class="action-btn">
          <i class="fa fa-eye"></i> 187
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i> 24
        </button>
        <button class="action-btn">
          <i class="fa fa-heart-o"></i> 36
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i> 分享
        </button>
      </div>
    </div>
    
    <!-- 2. 单图片样式 -->
    <div class="demand-item">
      <div class="publisher-info">
        <div class="no-avatar">
          <i class="fa fa-user"></i>
        </div>
        <div class="publisher-details">
          <div class="publisher-name">办公室采购</div>
          <div class="publish-time">昨天 10:23</div>
        </div>
        <button class="btn btn-secondary btn-sm">已关注</button>
      </div>
      
      <div class="demand-content">
        <div class="demand-title">采购办公电脑20台，要求高性能配置</div>
        <div class="demand-desc">
          公司新办公室需要采购20台办公电脑，主要用于设计工作，要求高性能配置，i7处理器，16G内存，独立显卡。希望本周内能完成采购，有意者请提供报价和配置单。
        </div>
        
        <!-- 单图片 -->
        <div class="images-container">
          <div class="single-image">
            <img src="https://picsum.photos/800/450?random=10" alt="参考配置图片">
          </div>
        </div>
        
        <div class="demand-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 北京市朝阳区</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 一周内</div>
          <div class="meta-item"><i class="fa fa-money"></i> <span class="budget">预算5-8万</span></div>
        </div>
        
        <div class="tags-container">
          <span class="demand-tag">办公设备</span>
          <span class="demand-tag">电脑采购</span>
          <span class="demand-tag">批量采购</span>
        </div>
      </div>
      
      <div class="action-bar">
        <button class="action-btn">
          <i class="fa fa-eye"></i> 342
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i> 56
        </button>
        <button class="action-btn">
          <i class="fa fa-heart-o"></i> 89
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i> 分享
        </button>
      </div>
    </div>
    
    <!-- 3. 3张图片样式 -->
    <div class="demand-item">
      <div class="publisher-info">
        <img src="https://picsum.photos/100/100?random=2" class="publisher-avatar" alt="发布者头像">
        <div class="publisher-details">
          <div class="d-flex align-items-center">
            <span class="publisher-name">服装店老板</span>
            <i class="fa fa-check-circle verify-badge"></i>
          </div>
          <div class="publish-time">3天前</div>
        </div>
        <button class="btn btn-outline-primary btn-sm">关注</button>
      </div>
      
      <div class="demand-content">
        <div class="demand-title">寻找秋季女装供应商，要求时尚潮流款式</div>
        <div class="demand-desc">
          本人经营一家线上女装店铺，需要寻找秋季新款女装供应商，要求款式时尚潮流，质量好，价格有优势。支持小批量拿货，能提供数据包者优先考虑。
        </div>
        
        <!-- 3张图片 -->
        <div class="images-container">
          <div class="multiple-images">
            <div class="multi-image-item">
              <img src="https://picsum.photos/300/300?random=20" alt="参考款式1">
            </div>
            <div class="multi-image-item">
              <img src="https://picsum.photos/300/300?random=21" alt="参考款式2">
            </div>
            <div class="multi-image-item">
              <img src="https://picsum.photos/300/300?random=22" alt="参考款式3">
            </div>
          </div>
        </div>
        
        <div class="demand-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 杭州市余杭区</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 长期合作</div>
          <div class="meta-item"><i class="fa fa-money"></i> <span class="budget">预算面议</span></div>
        </div>
        
        <div class="tags-container">
          <span class="demand-tag">女装采购</span>
          <span class="demand-tag">秋季新款</span>
          <span class="demand-tag">一件代发</span>
        </div>
      </div>
      
      <div class="action-bar">
        <button class="action-btn">
          <i class="fa fa-eye"></i> 456
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i> 78
        </button>
        <button class="action-btn">
          <i class="fa fa-heart-o"></i> 123
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i> 分享
        </button>
      </div>
    </div>
    
    <!-- 4. 多张图片(超过3张)样式 -->
    <div class="demand-item">
      <div class="publisher-info">
        <img src="https://picsum.photos/100/100?random=3" class="publisher-avatar" alt="发布者头像">
        <div class="publisher-details">
          <div class="publisher-name">装修业主</div>
          <div class="publish-time">1周前</div>
        </div>
        <button class="btn btn-secondary btn-sm">已关注</button>
      </div>
      
      <div class="demand-content">
        <div class="demand-title">90平米新房装修，寻找可靠装修团队</div>
        <div class="demand-desc">
          新房面积90平米，计划进行现代简约风格装修，需要全包服务，包括设计、施工、主材采购等。要求有相关经验，能提供案例参考，工期2-3个月，有意者请联系报价。
        </div>
        
        <!-- 多张图片(超过3张) -->
        <div class="images-container">
          <div class="multiple-images">
            <div class="multi-image-item">
              <img src="https://picsum.photos/300/300?random=30" alt="房屋现状1">
            </div>
            <div class="multi-image-item">
              <img src="https://picsum.photos/300/300?random=31" alt="房屋现状2">
            </div>
            <div class="multi-image-item">
              <img src="https://picsum.photos/300/300?random=32" alt="参考风格">
              <div class="image-count">+4</div>
            </div>
          </div>
        </div>
        
        <div class="demand-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 广州市天河区</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 1个月内</div>
          <div class="meta-item"><i class="fa fa-money"></i> <span class="budget">预算15-20万</span></div>
        </div>
        
        <div class="tags-container">
          <span class="demand-tag">房屋装修</span>
          <span class="demand-tag">全包服务</span>
          <span class="demand-tag">现代简约</span>
        </div>
      </div>
      
      <div class="action-bar">
        <button class="action-btn">
          <i class="fa fa-eye"></i> 678
        </button>
        <button class="action-btn">
          <i class="fa fa-comment-o"></i> 92
        </button>
        <button class="action-btn">
          <i class="fa fa-heart-o"></i> 156
        </button>
        <button class="action-btn">
          <i class="fa fa-share-alt"></i> 分享
        </button>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-shopping-bag nav-icon"></i>
      <span>供给</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-shopping-cart nav-icon"></i>
      <span>需求</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 发布需求悬浮按钮 -->
  <button class="float-btn">
    <i class="fa fa-plus"></i>
  </button>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选标签切换
    document.querySelectorAll('.filter-item').forEach(item => {
      item.addEventListener('click', function() {
        document.querySelectorAll('.filter-item').forEach(i => {
          i.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
    
    // 关注按钮切换
    document.querySelectorAll('.publisher-info .btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.textContent === '关注') {
          this.textContent = '已关注';
          this.classList.remove('btn-outline-primary');
          this.classList.add('btn-secondary');
        } else {
          this.textContent = '关注';
          this.classList.remove('btn-secondary');
          this.classList.add('btn-outline-primary');
        }
      });
    });
    
    // 点赞功能
    document.querySelectorAll('.action-btn .fa-heart-o').forEach(heart => {
      heart.addEventListener('click', function(e) {
        e.stopPropagation();
        const actionBtn = this.parentElement;
        const countText = actionBtn.textContent.trim();
        let count = parseInt(countText.split(' ').pop());
        
        if (this.classList.contains('fa-heart-o')) {
          this.classList.remove('fa-heart-o');
          this.classList.add('fa-heart', 'text-danger');
          actionBtn.innerHTML = `<i class="fa fa-heart text-danger"></i> ${count + 1}`;
        } else {
          this.classList.remove('fa-heart', 'text-danger');
          this.classList.add('fa-heart-o');
          actionBtn.innerHTML = `<i class="fa fa-heart-o"></i> ${count - 1}`;
        }
      });
    });
  </script>
</body>
</html>
